<template>
  <div class="avatar-container" @click="triggerUpload">
    <div v-if="!avatarUrl" class="avatar-placeholder">
      <div class="placeholder-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
      </div>
      <span>点击上传头像</span>
    </div>
    <transition name="fade">
      <img v-if="avatarUrl" :src="avatarUrl" alt="头像" class="avatar-image">
    </transition>
    <input type="file" ref="fileInput" @change="handleFileUpload" accept="image/*" style="display: none;">

    <transition name="slide-fade">
      <button v-if="avatarUrl" class="upload-btn" @click.stop="triggerUpload">更换头像</button>
    </transition>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Avatar',
  props: {
    avatarUrl: {
      type: String,
      default: ''
    }
  },
  emits: ['avatar-changed'],
  setup(props, { emit }) {
    const fileInput = ref(null);

    const triggerUpload = () => {
      fileInput.value.click();
    };

    const handleFileUpload = (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          emit('avatar-changed', e.target.result);
        };
        reader.readAsDataURL(file);
      }
    };

    return {
      fileInput,
      triggerUpload,
      handleFileUpload
    };
  }
}
</script>

<style scoped>
.avatar-container {
  width: 150px;
  height: 150px;
  border: 5px solid white;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
  text-align: center;
}

.placeholder-icon {
  margin-bottom: 10px;
  color: #a0a0a0;
}

/* 上传按钮样式 */
.upload-btn {
  position: absolute;
  bottom: 10px;
  background: rgba(74, 105, 189, 0.8);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(74, 105, 189, 0.3);
}

.upload-btn:hover {
  background: rgba(30, 55, 153, 0.9);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(74, 105, 189, 0.4);
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>